<template>
<div class="adoptedRefundInfo info-block" v-if="isInit">
  <div class="info-header">
    <div class="info-status">{{'当前退养状态：' + generateRefundStatus(info.status)}}</div>
    <div class="info-button">
      <el-button size="mini" @click="showOrder">订单详情</el-button>
      <el-button v-if="info.status === '0'" type="primary" size="mini" @click="showOper">处理申请</el-button>
      <el-button v-if="info.status === '1'" type="primary" size="mini" @click="refund">退款</el-button>
      <el-upload
        v-if="info.status === '4'"
        ref="yUpload"
        action=""
        :show-file-list="false"
        :http-request="() => {}"
        :multiple="false"
        :on-change="onUploadChange"
        :limit="1"
        accept="image/*"
        :auto-upload="false">
        <el-button type="primary" size="mini" @click="$$commonNotice('退款凭证')">上传退款凭证</el-button>
      </el-upload>
    </div>
  </div>
  <div class="info-content">
    <div class="info-item">
      <div class="info-item-header el-icon-medal">退养信息</div>
      <el-descriptions :column="3" direction="vertical" border>
        <el-descriptions-item>
          <template slot="label">物品编号</template>
          <span>{{ info.adoptedSn }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">退货方</template>
          <span>{{ info.memberName }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">实付金额</template>
          <span>{{ info.realPrice }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">付款方式</template>
          <span>{{ $$getCommonArrayName(info.payType, Object.values(getEnum('commonPayType'))) }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">退货申请时间</template>
          <span>{{ (info.commitTime || '').replace('T', ' ') }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">退货理由</template>
          <span>{{ info.reason }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="info-item" v-if="info.status !== '0'">
      <div class="info-item-header el-icon-medal">退货处理</div>
      <el-descriptions :column="4" direction="vertical" border>
        <el-descriptions-item>
          <template slot="label">处理意见</template>
          <span>{{ info.status === '3' ? '拒绝退养' : '同意退养' }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">处理备注</template>
          <span>{{ info.agreeOrRefuseNote }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">处理时间</template>
          <span>{{ (info.agreeTime || '').replace('T', ' ') }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">退款金额</template>
          <span>{{ info.returnAmount }}</span>
        </el-descriptions-item>
        <el-descriptions-item v-if="!!info.proofId" :span="4">
          <template slot="label">退款凭证</template>
          <el-image
            style="height: 100px; width: 100px"
            fit="contain"
            :src="generateMediaUrl({ fileOpenUrl: info.proofUrl })"
            :preview-src-list="[ generateMediaUrl({ fileOpenUrl: info.proofUrl }) ]">
          </el-image>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
  <y-form
    v-model="forms.formModel"
    :visible.sync="forms.showForm"
    title="处理申请"
    destroy-on-close
    append-to-body
    width="50%"
    :form-attrs="forms.formAttrs"
    :columns="formColumns"
    @ensure="ensureModel">
    <el-radio-group v-model="forms.formModel.isAgree" slot="isAgree" @change="changeAgree">
      <el-radio label="1">同意退货</el-radio>
      <el-radio label="3">拒绝退货</el-radio>
    </el-radio-group>
  </y-form>
  <el-drawer
    append-to-body
    :visible.sync="showDrawer"
    title="订单详情"
    :size="1000"
    destroy-on-close>
    <adopt-order-info
      :order-id="info.orderId"></adopt-order-info>
  </el-drawer>
</div>
</template>

<script>
import adoptOrderInfo from "../../adopt/adoptOrderDetails/adoptOrderInfo";
export default {
  name: "adoptedRefundInfo",
  inject: ['generateMediaUrl', 'getEnum', 'defaultUploadChange'],
  components:{ adoptOrderInfo },
  props:{
    id: '',
    adoptedId: String
  },
  computed:{
    formColumns(){
      return [
        {
          label: "是否同意",
          prop: "isAgree",
          template: true
        },
        {
          label: "退款金额",
          prop: "returnAmount",
          vIf: this.forms.formModel.isAgree === '1',
          rules: [{required: true, message: "请选择是否同意退货", trigger: "change"}],
          comp:{
            compType: 'input-number',
            attrs:{
              stepStrictly: true,
              step: 0.01,
              min: 0,
              max: this.info.realPrice || 0
            }
          }
        },
        {
          label: "操作备注",
          prop: "agreeOrRefuseNote",
          comp:{
            compType: 'input',
            attrs:{
              type: 'textarea',
              maxlength: 100,
              showWordLimit: true,
              autosize: {
                minRows: 3
              }
            }
          }
        }
      ]
    }
  },
  data(){
    return{
      info: null,
      isInit: false,
      showDrawer: false,
      forms:{
        formModel:{
          returnAmount: '',
          isAgree: '',
          agreeOrRefuseNote: ''
        },
        showForm: false,
        formAttrs:{
          labelWidth: '100px',
          rules: {
            isAgree: [{required: true, message: "请选择是否同意退货", trigger: "change"}]
          }
        }
      }
    }
  },
  created(){
    this.initInfo();
  },
  methods:{
    initInfo(refresh){
      this.$yAxios({
        url: this.$api.adopted.queryAdoptedReturn,
        data:{
          id: this.id
        },
        loading: true
      }, info => {
        this.$set(this, 'info', info);
        this.isInit = true;
        refresh && this.$emit('refresh');
      })
    },
    generateRefundStatus(status){
      return this.$$getCommonArrayName(status, this.getEnum('adoptedRefundStatus'))
    },
    resetForm(){
      Object.keys(this.forms.formModel).map(key => {
        this.forms.formModel[key] = '';
      })
    },
    showOper(){
      this.resetForm();
      this.forms.showForm = true;
    },
    ensureModel(form){
      let newForm = {
        id: this.info.id,
        adoptedId: this.adoptedId,
        status: form.isAgree,
        returnAmount: form.returnAmount,
        agreeOrRefuseNote: form.agreeOrRefuseNote
      }
      if(form.isAgree === '3') delete newForm.returnAmount;
      this.$yAxios({
        url: this.$api.adopted.updateAdoptedReturn,
        data: newForm
      }, info => {
        this.$message({
          type: 'success',
          message: '保存成功'
        });
        this.initInfo(true);
      })
    },
    refund(){
      let data = {
        refundOrderId: this.id,
        orderType: this.getEnum('commonOrderType').ADOPT.value
      }
      this.$yAxios({
        url: this.$api.common.refund,
        data,
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '退款成功'
        });
        this.initInfo(true);
      })
    },
    onUploadChange(fileObj){
      if(!fileObj.raw.type.startsWith('image/')){
        this.$message({
          type: 'warning',
          message: '只允许上传图片'
        });
        this.$refs['yUpload'].clearFiles();
        return false;
      }
      this.defaultUploadChange(fileObj, info => {
        this.$yAxios({
          url: this.$api.adopted.uploadAdoptedReturn,
          data: {
            applyId: this.info.id,
            proofId: info.id,
            proofUrl: info.fileOpenUrl
          },
          loading: true
        }, () => {
          this.$message({
            type: 'success',
            message: '上传退款凭证成功'
          });
          this.initInfo(true);
        })
      })
    },
    changeAgree(val){
      if(val === '1'){
        this.forms.formModel.returnAmount = this.info.realPrice;
      }else{
        this.forms.formModel.returnAmount = 0;
      }
    },
    showOrder(){
      this.showDrawer = true;
    },
  }
}
</script>

<style scoped lang="less">
.adoptedRefundInfo{
  padding: 0 40px;
}
</style>